<%--
  Created by IntelliJ IDEA.
  User: Laura
  Date: 2022/4/7
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>员工列表</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>

    <style type="text/css">
        select{
            width: 20vw;
            height: 30px;
            line-height: 70px;
            background-color: #efedee;
            color: #666;
            padding-left: 10px;
           font-size: 16px;
            margin: 0 10px;
            /*隐藏select的下拉图标*/
            //appearance: none;
        }
    </style>
</head>
<body>
<div>
    <form action="${pageContext.request.contextPath}/user/selectbynameandphone" method="get" id="selectBatchForm">
    <h3 style="text-align: center">用户姓名： <input type="text" id="username3" name="username">
    联系方式： <input type="text" id="phone3" name="phone">
    <input type="button" id="selectbtn" value="查询">
    </h3>
    </form>
</div>
<div class="container">
    <div class="row">
        <h3 style="text-align: center">员工信息列表</h3>
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
            <form action="${pageContext.request.contextPath}/user/deleteBatch" method="post" id="deleteBatchForm">
                <table border="1" class="table table-bordered table-hover" id="updateTable">
                    <tr class="success">
                        <th>
                            <input type="checkbox" id="checkAll">
                            <%--实现全选全不选效果--%>
                            <script>
                                $('#checkAll').click(function () {
                                    $('input[name="ids"]').prop('checked',$(this).prop('checked'));
                                })
                            </script>

                        </th>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>联系方式</th>
                        <th>创建时间</th>
                    </tr>

                    <c:forEach items="${userList}" var="user">
                        <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${user.uid}">
                            </td>
                            <td class="id">${user.uid}</td>
                            <td>${user.username}</td>
                            <td>${user.phone}</td>
                            <td>${user.createtime}</td>>
                            <td>
                                <input class="btn btn-default btn-sm" type="button" id="updateBt" data-toggle="modal" data-target="#myModal2" onclick="Value('${user.uid}')" value="修改">&nbsp;<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/user/delete?uid=${user.uid}">删除</a></td>
                        </tr>
                    </c:forEach>

                    <tr>
                        <td colspan="9" align="center">
                            <a class="btn btn-primary" id="selectdept" data-toggle="modal" data-target="#myModal">添加员工信息</a>
                            <input class="btn btn-primary" type="button" value="删除选中" id="deleteBatchBtn">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="col-lg-2"></div>
    </div>
</div>


<!-- Modal新增员工 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工信息</h4>
            </div>
            <div class="modal-body">
                    <center><h3>添加员工</h3></center>
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                            <form id="addForm" action="${pageContext.request.contextPath}/user/save" method="post">
                                <div class="form-group">
                                    <label for="username">姓名：</label>
                                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                                </div>

                                <div class="form-group">
                                    <label for="password">密码：</label>
                                    <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
                                </div>
                                <div class="form-group">
                                    <label for="phone">联系方式：</label>
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入联系方式">
                                </div>

                                <div class="form-group" style="text-align: center">
                                    <input class="btn btn-primary" type="button" value="提交" id="addFormBt"/>
                                    <input class="btn btn-default" type="reset" value="重置" />
                                    <input class="btn btn-default" type="button" onclick="history.go(-1)" value="返回" />
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-3"></div>
                    </div>
            </div>
            <div class="modal-footer">
              <!--  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-2" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">员工信息</h4>
            </div>
            <div class="modal-body">
                <center><h3>修改员工信息</h3></center>
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        <form id="updateForm" action="${pageContext.request.contextPath}/user/update" method="post">
                            <input type="hidden" name="uid" id="uid2">
                            <div class="form-group">
                                <label for="username">姓名：</label>
                                <input type="text" class="form-control" id="username2" name="username" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="password">密码：</label>
                                <input type="text" class="form-control" id="password2" name="password" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <label for="phone">联系方式：</label>
                                <input type="text" class="form-control" id="phone2" name="phone" placeholder="请输入联系方式">
                            </div>

                            <div class="form-group" style="text-align: center">
                                <input class="btn btn-primary" type="button" value="提交" id="updateFormBt"/>
                                <input class="btn btn-default" type="reset" value="重置" />
                                <input class="btn btn-default" type="button" onclick="history.go(-1)" value="返回" />
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-3"></div>
                </div>
            </div>
            <div class="modal-footer">
                <!--  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

</body>
<script>
    /*给删除选中按钮绑定点击事件*/
    $('#deleteBatchBtn').click(function () {
            if($('input[name=ids]:checked').length > 0){
                if(confirm('您确定要删除吗')) {
                    /*提交表单*/
                    $('#deleteBatchForm').submit();
                }
                else {
                    alert('请注意误操作')
                }
            }
            else{
                alert('请选中删除项')
            }
    });
    $('#addFormBt').click(function ()
    {
        $('#addForm').submit();
    });

    $('#updateFormBt').click(function ()
    {
        $('#updateForm').submit();

    });
    $('#selectbtn').click(function ()
    {
        $('#selectBatchForm').submit();
    });


    // $("#photoModal").modal("hide");
    function Value(uid) {

        $.ajax({
            url:"${pageContext.request.contextPath}/user/findById?uid="+uid,
            type:"GET",
            success:function(result) {
              // alert(JSON.stringify(result))
              //  alert(JSON.stringify(result[0].uid))
                $.each(result,function(){
                    $("#uid2").val(this.uid);
                    $("#username2").val(this.username);
                    $("#password2").val(this.password);
                    $("#phone2").val(this.phone);
                });
                $("#myModal2 select").append("");
                $.each(result,function() {

                    console.log(this.username);

                })
            }
        })
    }
</script>
</html>
